<template>
    <div>
        <el-form :inline="true" :model="form">
            <el-form-item label="订单编号">
                <el-input size="mini" placeholder="请输入订单编号" v-model="form.orderNo" />
            </el-form-item>
            <el-form-item label="三方订单号">
                <el-input size="mini" placeholder="请输入三方订单号" v-model="form.outOrderNo" />
            </el-form-item>
            <el-form-item label="商家名称">
                <el-input size="mini" placeholder="请输入商家名称" v-model="form.sellerName" />
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input size="mini" placeholder="请输入商品名称" v-model="form.goodsName" />
            </el-form-item>
            <el-form-item label="收件人">
                <el-input size="mini" placeholder="请输入收件人" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="收件电话">
                <el-input size="mini" placeholder="请输入收件人电话" v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="快递单号">
                <el-input size="mini" placeholder="请输入快递单号" v-model="form.logisticsKdh" />
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select size="mini" v-model="form.orderStatus" placeholder="订单状态" clearable>
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="待发货" value="1"></el-option>
                    <el-option label="待收货" value="2"></el-option>
                    <el-option label="已完成" value="3"></el-option>
                    <el-option label="已关闭" value="4"></el-option>
                    <el-option label="维权订单" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="供应商">
                <el-input size="mini" placeholder="请输入供应商" v-model="form.agencyName" />
            </el-form-item>
            <el-form-item label="结算状态">
                <el-select size="mini" v-model="form.profitStatus" placeholder="结算状态" clearable>
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="未结算" value="1"></el-option>
                    <el-option label="已结算" value="2"></el-option>
                    <el-option label="已失效" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单日期">
                <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    v-model="tkCreatedAt"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="维权状态">
                <el-select size="mini" v-model="form.feedbackStatus" placeholder="维权状态" clearable>
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="维权中" value="1"></el-option>
                    <el-option label="已处理" value="2"></el-option>
                    <el-option label="维权完成" value="3"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
                <el-button class="ml10" size="mini" @click="exportExcel">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="dataTable" :height="tableHeight" :data="list"
                        @sort-change="tblSort"
                style="width: 100%">
            <el-table-column align="left" label="商品信息" width="500">
                <template slot-scope="scope">
                    <div class="cell">
                        <template v-for="(item, idx) in scope.row.products">
                            <div class="order-img-box" :key="item.id">
                                <div class="left">
                                    <div v-if="idx==0" class="order-no">订单编号：{{ scope.row.orderNo }}<span style="color:red;">（{{ scope.row.agencyName }}）</span></div>

                                    <div class="title-img">
                                        <div class="img-text-box">
                                            <img :src="item.imgUrl" class="el-tooltip img item">
                                            <div>
                                                <div class="img-text ellipsis2 f-14">{{ item.title }}</div>
                                                <span class="btn-text" v-if="item.attribute">{{ item.attribute }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right" style="font-size:12px;">共{{ item.quantity }}件</div>
                            </div>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="left" label="三方订单号" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.outOrderNo}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商家名称" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.sellerName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="订单状态" width="130">
                <template slot-scope="scope">
                    <span>{{scope.row.orderStatusText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="买家/收货人" width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.addressName}}</span>
                    <p>{{ scope.row.addressMobile }}</p>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="结算金额" sortable="custom" prop="agency_amount">
                <template slot-scope="scope">
                    <span>￥{{scope.row.agencyAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="批发金额" sortable="custom" prop="total_amount">
                <template slot-scope="scope">
                    <span>￥{{scope.row.totalAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="下单时间" width="150" sortable="custom" prop="created_at">
                <template slot-scope="scope">
                    <span>{{scope.row.createdAt}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="结算状态" width="120">
                <template slot-scope="scope">
                    <el-tag :type="getStatusColor(scope.row)">{{scope.row.settleStatusText}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                    <!-- <el-button v-if="scope.row.canSend==1" type="text" @click="handleSend(scope.row)">发货</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="form.pageNum" :page-sizes="[20,30, 50]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
    </div>
</template>
<script>
    import {
        order_list,
        order_export
    } from '../../api/order';

    export default {
        name: 'order-list',
        components: {
        },
        props: {
            formData: Object
        },
        computed: {
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    this.form.orderStatus = val.order_status;

                    this.getList();
                }
            }
        },
        data() {
            return {
                tkCreatedAt: undefined,
                tableHeight: 200,
                form: {
                    orderStatus: "0",
                    orderNo: undefined,
                    name: undefined,
                    mobile: undefined,
                    startDate: undefined,
                    endDate: undefined,
                    profitStatus: "0",
                    feedbackStatus: undefined,
                    pageNum: 1,
                    pageSize: 20,
                    orderCol: undefined,
                    orderAsc: undefined,
                    feedbackStatus: "0",
                    agencyName: undefined,
                    sellerName: undefined,
                    logisticsKdh: undefined,
                },
                list: [],
                total: 0,
            }
        },
        created() {
            this._getTableHeight();
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        methods: {
            createCellPos(n) {
                var ordA = 'A'.charCodeAt(0);

                var ordZ = 'Z'.charCodeAt(0);

                var len = ordZ - ordA + 1;

                var s = "";



                while( n >= 0 ) {

                    s = String.fromCharCode(n % len + ordA) + s;

                    n = Math.floor(n / len) - 1;

                }

                return s;

            },
            exportExcel() {
                order_export(this.form).then((res)=>{
                    if(res.data.items && res.data.items.length > 0) {
                        let items = res.data.items;

                        let export_config = res.data.exportConfig;
                        items.unshift(export_config.header)

                        var column = null;
                        eval("column = " + export_config.columnJs);
                        console.log(column)
                        let export_data = LAY_EXCEL.filterExportData(items, column);
                        let sheet_data = new Object();
                        eval("sheet_data." + res.data.sheet + "=export_data;");
                        let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

                        LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
                            s: {
                                fill: { fgColor: { rgb: "FFFF00" } },
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                },
                                font: {
                                    sz: 12,
                                    bold: true
                                }
                            }
                        });

                        LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
                            extend: {
                                '!merges': export_config.mergeCells,
                                '!cols': export_config.width,
                                '!rows': LAY_EXCEL.makeRowConfig({
                                    1: 40
                                })
                            }
                        });
                    } else {
                        this.$message.error("导出数据为空");
                    }
                }).catch((err)=>{
                    console.log(err)
                })

            },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 280
            },
            tblSort(d) {
                this.form.orderCol = d.prop;
                this.form.orderAsc = d.order;

                this.handleFilter();
            },
            handleFilter() {
                this.form.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.form.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.form.pageNum = val;
                this.getList();
            },
            getList() {
                if(this.tkCreatedAt) {
                    this.form.startDate = this.tkCreatedAt[0];
                    this.form.endDate = this.tkCreatedAt[1];
                } else {
                    this.form.startDate = undefined;
                    this.form.endDate = undefined;
                }
                order_list(this.form).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                })
            },
            getStatusColor(row) {
                if(row.profitStatus == 5) {
                    return "success"
                }

                return "danger"
            },
            handleDetail(row) {
                let {href} = this.$router.resolve({path: '/order_detail?id=' + row.id});
                window.open(href, '_blank');

            },
            handleSend(row) {
                
            }

        }
    }
</script>
<style lang="scss" scoped>
    .cell {
        line-height: 1.5;
        padding: 0 2px;

        .order-img-box {
            margin-left: 10px;
            margin-bottom:10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: left;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            .order-no {
                margin-bottom: 10px;
                font-size:14px;
            }

            .title-img {
                position: relative;
                border-radius: 4px;
                overflow-y: hidden;

                .img-text-box {
                    margin-left: 10px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;

                    .img {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                        margin-right: 10px;
                    }

                    .img-text {
                        width: 240px;
                        height: 36px;
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

                    .btn-text {
                        width: auto;
                        height: 18px;
                        background: rgba(51,51,51,.1);
                        font-size: 12px;
                        padding: 2px 4px;
                    }
                }
            }
        }
    }
</style>